<template>
	<view class="page">
		<view class="bar_info" :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class="title_bar">
				<view class="title_bar_left"></view>
				<view class="title_bar_center">
					
				</view>
				<view class="title_bar_right"></view>
			</view>
		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		
		<view class="login_view">
			<view class="login_tips">
				<view class="login_tips_1">欢迎采购</view>
				<view class="login_tips_2">登录成功后可进行采购</view>
			</view>
			<view class="login_input">
				<view class="login_input_item margin-42">
					<u-input v-model="mobile" placeholder="请输入手机号/用户名" height="100" placeholder-style="font-size: 28rpx;color: #999;" :maxlength="14" type="text" />
				</view>
				<view class="login_input_item">
					<u-input v-model="password" placeholder="请输入密码" height="100" placeholder-style="font-size: 28rpx;color: #999;" type="password" />
				</view>
			</view>
			<view class="login-btn">
				<u-button :custom-style="customStyle" :hair-line="false" :ripple="true" ripple-bg-color="rgba(2, 120, 252, 0.3)" @click="registerBtn">登录</u-button>
			</view>
			<!-- <view class="login_text">
				<text class="login_text_1">没有用户，</text>
				<text class="login_text_2" @tap.stop="handleRejister">立即注册</text>
			</view> -->
			<!-- <view class="forget_text" @tap.stop="handleJump" data-type="navigateTo" :data-url="`/pages/my/changeLoginPsd`">忘记密码？</view> -->
			<!-- <view class="pickup_point">
				<image :src='STATIC_URL+"6.png"' mode="aspectFill"></image>
				<view class="">自提点登录</view>
			</view> -->
		</view>
		<view class="login_agree">
			<image v-if="is_check" :src='STATIC_URL+"2.png"' mode="" @tap.stop="is_check=false"></image>
			<image v-else :src='STATIC_URL+"3.png"' mode="" @tap.stop="is_check=true"></image>
			<text>请阅读并同意</text>
			<text class="login_agree_text" @tap.stop="handleAgreement(2)">《隐私政策》</text>
			<text>和</text>
			<text class="login_agree_text" @tap.stop="handleAgreement(1)">《用户协议》</text>
		</view>
		
		<view style="height: 100rpx;"></view>
	</view>
</template>

<script>
	import {
		validate
	} from '@/common/utils/validate.js'
	export default {
		data() {
			return {
				mobile: "",
				// mobile: "15137862877",
				password: "",
				customStyle: {
					backgroundColor: '#41AF36',
					borderRadius: '10rpx',
					width: '680rpx',
					height: '90rpx',
					color: '#fff',
					fontSize: '32rpx',
				},
				is_check: false
			}
		},
		onLoad() {
			
		},
		methods: {
			registerBtn() {
				if (!validate(this.mobile, 'require')) {
					this.$message.info('请输入手机号或用户名');
					return false;
				}
				// if (!validate(this.mobile, 'phone')) {
				// 	this.$message.info('请输入正确的手机号');
				// 	return false;
				// }
				if (!validate(this.password, 'require')) {
					this.$message.info('请输入密码');
					return false;
				}
				// if (!validate(this.password, 'password')) {
				// 	this.$message.info('请输入6-12位字母+数字密码');
				// 	return false;
				// }
				if (!this.is_check) {
					this.$message.info('请阅读并同意隐私政策和用户协议');
					return false;
				}
				this.$api.post(global.apiUrls.glyLogin, {
					username: this.mobile,
					password: this.password
				}).then(res => {
					// console.log(res);
					this.$message.info(res.data.message);
					if (res.data.code == 200) {
						this.$store.commit('updateToken', res.data.data.token);
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/tabbar/index'
							})
							// uni.navigateBack();
						}, 800)
					}
				})
			},
			handleRejister() {
				uni.redirectTo({
					url: '/pages/login/register'
				})
			},
			handleAgreement(type) {
				uni.navigateTo({
					url: '/pages/login/agreement?type=' + type
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background: url(https://www.shiyaocanyin.com/images/1.png) no-repeat #f5f5f5;
		background-size: 100% 100% !important;
		height: 100vh;
		.bar_info {
			width: 750rpx;
			height: 88rpx;
			overflow: hidden;
			// border-bottom: 1px solid #eee;
			// background: #fff;
			z-index: 10;
			position: fixed;
			top: 0rpx;
			background: url(https://www.shiyaocanyin.com/images/1.png) no-repeat;
			background-size: 100% 100% !important;
		
			.title_bar {
				padding: 0 32rpx;
				display: flex;
				justify-content: space-between;
		
				.title_bar_left {}
		
				.title_bar_center {
					line-height: 88rpx;
					font-size: 36rpx;
					font-weight: 400;
				}
		
				.title_bar_right {}
			}
		}
		.login_view {
			padding: 0 35rpx;
			margin-top: 130rpx;
			.login_tips {
				margin-bottom: 74rpx;
				padding: 0 25rpx;
				.login_tips_1 {
					font-size: 48rpx;
					color: #3D3D3D;
					line-height: 67rpx;
				}
				.login_tips_2 {
					font-size: 26rpx;
					color: rgba(61,61,61,0.5);
					line-height: 36rpx;
				}
			}
			.login_input {
				.login_input_item {
					height: 100rpx;
					width: 100%;
					background: #fff;
					border-radius: 10rpx;
					font-size: 28rpx;
				}
				.margin-42 {
					margin-bottom: 44rpx;
				}
				/deep/.u-input {
					padding: 0 40rpx !important;
				}
			}
			.login-btn {
				width: 680rpx;
				height: 90rpx;
				margin: 186rpx 0 50rpx;
			}
			.login_text {
				font-size: 26rpx;
				text-align: center;
				.login_text_1 {
					color: #CCCCCC;
				}
				.login_text_2 {
					color: #0278FC;
				}
			}
			.forget_text {
				font-size: 26rpx;
				color: rgba(61,61,61,0.5);
				line-height: 36rpx;
				text-align: center;
			}
			.pickup_point {
				margin-top: 115rpx;
				text-align: center;
				image {
					width: 140rpx;
					height: 140rpx;
				}
				view {
					font-size: 30rpx;
					margin-top: 20rpx;
					color: #3D3D3D;
				}
			}
		}
		.login_agree {
			width: 100%;
			display: flex;
			justify-content: center;
			margin-top: 56rpx;
			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 12rpx;
				transform: translateY(4rpx);
			}
			.login_agree_text {
				color: #41AF36;
				font-size: 30rpx;
			}
		}
	}
</style>